<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="/w/w2ui-1.5.rc1.css"/>
    <link rel="stylesheet" type="text/css" href="/w/font-awesome.min.css"/>
    <title>主页面</title>
    <style type="text/css">
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        .top-title {
            height: 50px;
            line-height: 50px;
            font-size: 18px;
            font-weight: bold;
            margin-left: 15px;
        }
    </style>
</head>
<body>


<script src="/jquery-3.2.0.js" type="text/javascript"></script>
<script src="/w/w2ui-1.5.rc1.js" type="text/javascript"></script>

<script type="text/javascript">
    w2utils.locale('/w/zh-cn.json'); // 汉化
    $(function () {
        $('body').w2layout({
            name: 'layout',
            padding: 2,
            panels: [
                {type: 'top', size: 50, resizable: false, content: '<div class="top-title">XXXX后台管理系统</div>'},
                {
                    type: 'left',
                    size: 200,
                    resizable: false,
                    content: '<div id="sidebar" style="width: 100%;height: 100%;"></div>'
                },
                {type: 'main', content: '<div id="grid" style="width: 100%;height: 100%;"></div>'}
            ]
        });

        $('#sidebar').w2sidebar({
            name: 'sidebar',
            flatButton: true,
            nodes: [
                {
                    id: 'level-1',
                    text: 'Level 1',
                    img: 'icon-folder',
                    expanded: true,
                    /*group: true,*/
                    groupShowHide: false,
                    nodes: [{id: 'level-1-1', text: 'Level 1.1', icon: 'fa-home', img: 'icon-folder'},
                        {id: 'level-1-2', text: 'Level 1.2', icon: 'fa-coffee', img: 'icon-folder'},
                        {id: 'level-1-3', text: 'Level 1.3', icon: 'fa-comment-alt', img: 'icon-folder'}
                    ]
                },
                {
                    id: 'level-2', text: 'Level 2', img: 'icon-folder', group: true,
                    nodes: [{id: 'level-2-1', text: 'Level 2.1', icon: 'fa-star-empty'},
                        {id: 'level-2-2', text: 'Level 2.2', icon: 'fa-star-empty'},
                        {id: 'level-2-3', text: 'Level 2.3', icon: 'fa-star-empty'}
                    ]
                }
            ],
            onFlat: function (event) {
                $('#sidebar').css('width', (event.goFlat ? '35px' : '200px'));
                w2ui['layout'].sizeTo('left', (event.goFlat ? '35px' : '200px'));
            },
            onClick: function (event) {
                var target = event.target;
                if (target == 'level-1-1') {
                    w2ui.layout.content('main', w2ui.grid);
                } else {
                    w2ui.layout.content('main', '<div style="padding: 10px">' + event.target + '</div>');
                }
            }
        });


        $('#grid').w2grid({
            name: 'grid',
            method: 'GET',
            url: 'data.json',
            fixedBody: true, // 固定header和footer
            multiSelect: true, // 多选
            show: {
                toolbar: true,
                footer: true,
                toolbarAdd: true, // 添加按钮
                toolbarDelete: true,
                toolbarSave: true,
                toolbarEdit: true,
                lineNumbers: true, // 显示行号
//                expandColumn: true, // 折叠按钮，结合 onExpand事件一起使用
                selectColumn: true // 表头显示全选checkbox
            },
            multiSearch: true,
            searches: [
                {field: 'lname', caption: 'Last Name', type: 'text', options: {}},
                {field: 'fname', caption: 'First Name', type: 'text'},
                {
                    field: 'email',
                    caption: 'Email',
                    type: 'list',
                    options: {items: ['peter@gmail.com', 'jim@gmail.com', 'jdoe@gmail.com']}
                },
                {field: 'sdate', caption: 'Start Date', type: 'date'}
            ],
            columns: [
                {
                    field: 'recid', caption: 'ID', size: '50px', sortable: true, attr: 'align=center', // attr定义样式属性等
                    // info: true
                    frozen: true // 冻结列
                },
                {field: 'lname', caption: 'Last Name', size: '30%', sortable: true, frozen: true}, // sortable 排序
                {
                    field: 'fname',
                    caption: 'First Name',
                    size: '30%',
                    sortable: true,
                    resizable: true,
                    editable: {type: 'text'} // editable支持编辑
                },
                {
                    field: 'email', caption: 'Email', size: '40%',
                    // render实现此列的修改化设置，r为当前行数据，i为行索引（0开始），ci为列索引（0开始）
                    render: function (r, i, ci) {
                        return "@Email : " + r.email + " " + i + " " + ci;
                    }
                },
                {
                    field: 'sdate', caption: 'Start Date', size: '120px'
                }
            ],
            onAdd: function (event) {
                event.title = '添加';
                openPopup(event);
            },
            onEdit: function (event) {
                event.title = '更新';
                openPopup(event);
            },
            onDelete: function (event) {
                console.log('delete has default behavior');
            },
            onSave: function (event) {
                w2alert('save');
            },
            toolbar: {
                items: [
                    {id: 'test', type: 'button', caption: '测试', icon: 'w2ui-icon-info'}
                ],
                onClick: function (event) {
                    if (event.target == 'test') {
                        w2alert('我是自定义按钮测试事件！');
                    }
                }
            }
//            onExpand: function (event) {
//                $('#' + event.box_id).html('<div style="padding: 10px; height: 100px">Expanded content</div>');
//            }
        });


        var records = [
            {
                recid: 1,
                fname: 'Jane',
                lname: 'Doe',
                email: 'jdoe@gmail.com',
                sdate: '2017-04-12',
                w2ui: {"style": "background-color: #C2F5B4"} // w2ui可以定义单行的样式
            },
            {
                recid: 100, fname: 'Stuart', lname: 'Motzart', email: 'jdoe@gmail.com', sdate: '2017-04-12',
                w2ui: {
                    // 数据分层
                    children: [
                        {
                            recid: 1001, fname: 'Jin', lname: 'Franson', email: 'jdoe@gmail.com', sdate: '2017-04-12',
                        },
                        {recid: 1002, fname: 'Susan', lname: 'Ottie', email: 'jdoe@gmail.com', sdate: '2017-04-12'}
                    ]
                }
            },
            {recid: 3, fname: 'Jin', lname: 'Franson', email: 'jdoe@gmail.com', sdate: '2017-04-12'}
        ];
//        w2ui['grid'].load('data.json'); // 加载远程数据
        // 添加数据
//        w2ui['grid'].add(records);
    });


    /**
     * popup form
     * @param e
     */
    function openPopup(e) {
        if (!w2ui.form) {
            $().w2form({
                name: 'form',
                url: '/post',
                style: 'border: 0px; background-color: transparent;',
                fields: [
                    {name: 'recid', type: 'text', html: {caption: '标识：', attr: 'style="width:300px;" readonly'}},
                    {field: 'fname', type: 'text', required: true, html: {caption: '姓：', attr: 'style="width:300px;'}},
                    {field: 'lname', type: 'text', required: true, html: {caption: '名：', attr: 'style="width:300px;'}},
                    {field: 'email', type: 'email', html: {caption: '邮箱：', attr: 'style="width:300px;'}},
                    {field: 'sdate', type: 'date', html: {caption: '日期：', attr: 'style="width:300px;'}}
                ],
                actions: {
                    "保存": function () {
                        // console.log(w2utils.settings);
                        this.save(function (data) {
                            // console.log(data);
                            // 添加成功后关闭 popup
                            w2alert(data.message).done(function () {
                                w2popup.close();
                            });
                        });
                    },
                    "重置": function () {
                        this.clear();
                    }
                }
            });
        }
        $().w2popup('open', {
            title: e.title,
            body: '<div id="form-div" style="width: 100%; height: 100%;"></div>',
            style: 'padding: 15px 0px 0px 0px',
            width: 500,
            height: 300,
            showMax: true,
            onToggle: function (event) {
                $(w2ui.form.box).hide();
                event.onComplete = function () {
                    $(w2ui.form.box).show();
                    w2ui.form.resize();
                }
            },
            onOpen: function (event) {
                event.onComplete = function () {
                    var form = w2ui.form;
                    // 清空form，防止 w2render再次请求
                    form.clear();
                    // 此方法会激活 form中的请求
                    $('#w2ui-popup #form-div').w2render('form');
                    // 不能立即填充，不然会将填充的值冲掉
                    setTimeout(function () {
                        // 将表格数据填充到 form中
                        var recid = e.recid;
                        if (recid) {
                            var grid = w2ui.grid;
                            form.recid = recid;
                            form.record = $.extend(true, {}, grid.get(recid));
                            form.refresh();
                        }
                    }, 50);
                }
            }
        });
    }

</script>
</body>
</html>